//Default styles
html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

ul {
    &:not(.browser-default) {
        padding-left: 0;
        list-style-type: none;
        &>li {
            list-style-type: none;
        }
    }
}
ol:not(.browser-default){
    padding-left: 0;
}

a {
    color: $link-color;
    text-decoration: none; // Gets rid of tap active state
    -webkit-tap-highlight-color: transparent;
}

// Positioning
.valign-wrapper {
    display: flex;
    align-items: center;
}

// classic clearfix
.clearfix {
    clear: both;
}

// Z-levels
.z-depth-0 {
    box-shadow: none !important;
}

.z-depth-1 {
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}

.z-depth-1-half {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

.z-depth-2 {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.z-depth-3 {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}

.z-depth-4 {
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}

.z-depth-5 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}

.hoverable {
    transition: box-shadow .25s;
    &:hover {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}




// Pagination
.pagination {
    li {
        display: inline-block;
        border-radius: 2px;
        text-align: center;
        vertical-align: top;
        height: 30px;
        a {
            color: #444;
            display: inline-block;
            font-size: 1.2rem;
            padding: 0 10px;
            line-height: 30px;
        }
        &.active a {
            color: #fff;
        }
        &.active {
            background-color: $primary-color;
        }
        &.disabled a {
            cursor: default;
            color: #999;
        }
        i {
            font-size: 2rem;
        }
    }
    li.pages ul li {
        display: inline-block;
        float: none;
    }
}

@media #{$medium-and-down} {
    .pagination {
        width: 100%;
        li.prev,
        li.next {
            width: 10%;
        }
        li.pages {
            width: 80%;
            overflow: hidden;
            white-space: nowrap;
        }
    }
}

// Breadcrumbs
.breadcrumb {
    font-size: 18px;
    color: rgba(255, 255, 255, .7);
    i,
    [class^="mdi-"],
    [class*="mdi-"],
    i.material-icons {
        display: inline-block;
        float: left;
        font-size: 24px;
    }
    &:before {
        content: '\E5CC';
        color: rgba(255, 255, 255, .7);
        vertical-align: top;
        display: inline-block;
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 25px;
        margin: 0 10px 0 8px;
        -webkit-font-smoothing: antialiased;
    }
    &:first-child:before {
        display: none;
    }
    &:last-child {
        color: #fff;
    }
}


/*********************
  Media Query Classes
**********************/

.hide-on-small-only,
.hide-on-small-and-down {
    @media #{$small-and-down} {
        display: none !important;
    }
}

.hide-on-med-and-down {
    @media #{$medium-and-down} {
        display: none !important;
    }
}

.hide-on-med-and-up {
    @media #{$medium-and-up} {
        display: none !important;
    }
}

.hide-on-med-only {
    @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
        display: none !important;
    }
}

.hide-on-large-only {
    @media #{$large-and-up} {
        display: none !important;
    }
}

.show-on-large {
    @media #{$large-and-up} {
        display: block !important;
    }
}

.show-on-medium {
    @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
        display: block !important;
    }
}

.show-on-small {
    @media #{$small-and-down} {
        display: block !important;
    }
}

.show-on-medium-and-up {
    @media #{$medium-and-up} {
        display: block !important;
    }
}

.show-on-medium-and-down {
    @media #{$medium-and-down} {
        display: block !important;
    }
}

// Center text on mobile
.center-on-small-only {
    @media #{$small-and-down} {
        text-align: center;
    }
}




/*******************
  Utility Classes
*******************/

.hide {
    display: none !important;
}

// Text Align
.left-align {
    text-align: left;
}

.right-align {
    text-align: right
}

.center,
.center-align {
    text-align: center;
}

.left {
    float: left !important;
}

.right {
    float: right !important;
}

// No Text Select
.no-select {
    user-select: none;
}

.circle {
    border-radius: 50%;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.truncate {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-padding {
    padding: 0 !important;
}